<template>
  <div class="the-video">
    <the-header icon="#icon-shipin1" backgroundColor="#ffffff" :showInput="true" :showIcon="false">
    </the-header>
    <van-sticky>
      <div class="video-title">
        <div v-for="(item,index) in titles" :key="index"
          class="tab-control-item"
          :class="{ active:index === titleIndex }"
          @click="titleClick(index)">
          <span>{{ item }}</span>
        </div>
      </div>

      <div class="video-tag">
        <ul v-if="videoTag === 1">
          <li
            v-for="(item,index) in videoTagList" :key="index"
            :class="{active:index === currentIndex}"
            @click="itemClick(item,index)">
            {{ item.name }}
          </li>
          <li class="last-li" v-if="allFlag" @click="videoAll">全部</li>
        </ul>

        <ul class="tag2" v-if="videoTag === 2">
          <li
            v-for="(item,index) in mvTagList" :key="index"
            :class="{active:index === mvIndex}"
            @click="tagClick(item,index)">
            {{ item }}
          </li>
        </ul>
      </div>
    </van-sticky>

    <div class="content">
      <div class="video-content" v-if="videoTag === 1">
        <video-list :data="dataList"></video-list>
        <video-category :title="categoryTitle" :data="allVideo"></video-category>
        <recommend-video :title="recommendTitle" :data="recommendVideo"></recommend-video>
      </div>
      
      <div class="video-content" v-if="videoTag === 2">
        <mv-list :data="mvList"></mv-list>
        <new-mv :title="newmvTitle" :data="newmv"></new-mv>
        <recommend-mv :title="recommendMvTitle" :data="recommendMv"></recommend-mv>
        <wangyi-mv :title="wangyiTitle" :data="wangyiMv"></wangyi-mv>
        <rank-list :title="rankTitle" :data="rankList"></rank-list>
      </div>

    </div>
  </div>
</template>

<script>
  import TheHeader from '../../components/TheHeader/TheHeader.vue'
  import VideoList from './cpns/video-list.vue'
  import MvList from './cpns/mv-list.vue'
  import VideoCategory from './cpns/video-category.vue'
  import recommendVideo from './cpns/recommend-video.vue'
  import NewMv from './cpns/NewMv.vue'
  import wangyiMv from './cpns/wangyi-Mv.vue'
  import recommendMv from './cpns/recommend-mv.vue'
  import RankList from './cpns/rank-list.vue'

  import { getVideoTag, getVideoList, getVideoCategoryList, getAllVideo, getRecommendVideo } from '../../api/video'
  import { getAllMV, getNewMv, getWangyiMv, getRecommendMv, getMvRank } from '../../api/mv'

  export default {
    data() {
      return {
        titles:['视频','MV'],
        videoTag:1,
        itemTag:'',
        videoTagList:[],
        mvTagList:[],
        allFlag:true,
        currentIndex:0,
        mvIndex:0,
        titleIndex:0,
        dataList:[],
        mvList:[],
        selectShow: "1",
        selectMenu: true,
        showPopover: false,
        videoList:[],
        allVideo:[],
        categoryTitle:'视频分类',
        recommendTitle:'推荐视频',
        recommendVideo:[],
        newmv:[],
        newmvTitle:'最新MV',
        wangyiMv:[],
        wangyiTitle:'网易出品MV',
        recommendMv:[],
        recommendMvTitle:'推荐MV',
        rankList:[],
        rankTitle:'排行榜',
      }
    },

    components:{
      TheHeader,
      VideoList,
      MvList,
      VideoCategory,
      recommendVideo,
      NewMv,
      wangyiMv,
      recommendMv,
      RankList
    },

    created(){
      // this._getVideoCategoryList();
      this._getAllVideo();
      this._getRecommendVideo();
      this._getNewMv();
      this._getWangyiMv();
      this._getRecommendMv();
      this._getVideoTag();

      getVideoCategoryList().then((res) => {
        // console.log(res);
        this.videoTagList = res.data;
        // console.log(this.videoTagList);
        this._getVideoList(this.videoTagList[0].id);
      }).catch((error) => {
        console.log(error);
      })
    },

    // mounted:function(){
      
    // },

    methods:{
      _getVideoCategoryList(){
        getVideoCategoryList().then((res) => {
          // console.log(res);
          this.videoTagList = res.data;
        })
      },

      _getVideoTag(){
        getVideoTag().then((res) => {
          // console.log(res);
          this.videoTagList = res.data;
        }).catch((error) => {
          console.log(error);
        })
      },

       _getVideoList(id){
        getVideoList(id).then((res) => {
          this.dataList = res.datas;
          // console.log(this.dataList);
        }).catch((error) => {
          console.log(error);
        })
      },

      _getAllVideo(){
        getAllVideo().then((res) => {
          this.allVideo = res.datas;
        })
      },
      
      _getRecommendVideo(){
        getRecommendVideo(10).then((res) => {
          console.log(res);
          this.recommendVideo = res.datas;
        })
      },

      _getNewMv(){
        getNewMv().then((res) => {
          // console.log(res);
          this.newmv = res.data;
        })
      },

      _getWangyiMv(){
        getWangyiMv().then((res) => {
          // console.log(res);
          this.wangyiMv = res.data;
        })
      },

      _getRecommendMv(){
        getRecommendMv().then((res) => {
          // console.log(res);
          this.recommendMv = res.result;
        })
      },

      // 点击事件
      titleClick(index){
        this.titleIndex = index;
        if(this.titleIndex === 0){
          this.videoTag = 1;
          getVideoCategoryList().then((res) => {
            this.videoTagList = res.data;
            this._getVideoList(this.videoTagList[this.currentIndex].id);
          })
        }
        else{
          this.videoTag = 2;
          this.mvTagList = ['全部','内地','港台','欧美','日本','韩国'];
          let area = this.mvTagList[this.mvIndex];
          // console.log(area);
          getAllMV(area).then((res) => {
            this.mvList = res.data;
            // console.log(this.mvList);
          });
          getMvRank(area).then((res) => {
            this.rankList = res.data;
          })
        }
      },

      itemClick(item,index){
        this.currentIndex = index;
        this._getVideoList(item.id);
      },

      tagClick(item,index){
        this.mvIndex = index;
        getAllMV(item).then((res) => {
          this.mvList = res.data;
        })
        getMvRank(item).then((res) => {
          this.rankList = res.data;
        })
      },

      videoAll(){
        this._getVideoTag();
        this.allFlag = false;
      },
      
    },
  }
</script>

<style scoped>
.video-title{
  /* padding-top: 20px; */
  padding-left: 13px;
  padding-right: 30px;
  padding-top: 65px;
  background: #fafafa;
  display: flex;
  justify-content: space-between;
  /* padding: 10px; */
}

.video-tag {
  /* padding-top: 55px; */
  overflow-x: auto;
  background: #fafafa;
}

.header-left{
  width: 48px;
  height:41px;
  position:fixed;
  top:8%;
}

.video-tag ul {
  display: flex;
  flex-wrap: nowrap;
  padding: 0 5px;
}

.tag2{
  display: flex;
  flex-wrap: nowrap;
  padding: 0 5px;
}

.tag2 li{
  flex: 1;
}

.video-tag ul li {
  padding: 0 8px;
  line-height: 40px;
  white-space: nowrap;
  display: inline-block;
  border-bottom: 1px solid rgb(150, 150, 150);
}

.last-li:hover{
  color: #fc6464;
}

.video-content {
  padding-top: 10px;
}

.active{
  color: #fc6464;
}


.content-info img{
  min-width: 100px;
  height: 100px;
  float: left;
  /* padding-bottom: 30px; */
}

.content-info span{
  float: right;
}

.content{
  overflow-y: auto;
  padding-bottom: 50px;
}

</style>